<template>
  <div class="music-list">
    <!-- 返回按钮 -->
    <div class="back" @click="$router.go(-1)">
      <i class="icon-back"/>
    </div>
    <!-- 标题 -->
    <h1 class="title" v-html="title"/>
    <!-- 背景图 -->
    <div ref="bgImage" :style="bgStyle" class="bg-image">
      <!-- 随机播放 -->
      <div v-show="songs.length" ref="playBtn" class="play-wrapper">
        <div class="play" @click="random">
          <i class="icon-play"/>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <!-- 遮罩 -->
      <div ref="filter" class="filter"/>
    </div>

    <div ref="layer" class="bg-layer"/>

    <scroll ref="list" :data="songs" :probe-type="probeType" :listen-scroll="listenScroll" class="list" @scroll="scroll">
      <!-- 歌手对应的歌曲列表 -->
      <div class="song-list-wrapper">
        <song-list :songs="songs" :rank="rank" @select="selectItem"/>
      </div>

      <!-- loading加载 -->
      <div v-show="!songs.length" class="loading-container">
        <loading/>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
import SongList from 'base/song-list/song-list'
import { prefixStyle } from 'common/js/dom'
import Loading from 'base/loading/loading'
import { mapActions } from 'vuex'
import { playlistMixin } from 'common/js/mixin'
const transform = prefixStyle('transform')
const backdrop = prefixStyle('backdrop-filter')
const RESERVED_HEIGHT = 40
export default {
  mixins: [playlistMixin],
  props: {
    bgImage: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scrollY: 0
    }
  },
  computed: {
    bgStyle () {
      return 'background-image : url(' + this.bgImage + ')'
    }
  },
  created () {
    // 实时派发滚动事件 不截流
    this.probeType = 3
    // 监听滚动
    this.listenScroll = true
  },
  mounted () {
    this.imageHeight = this.$refs.bgImage.clientHeight
    this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT
    // 动态 top 值
    this.$refs.list.$el.style.top = `${this.imageHeight}px`
  },
  methods: {
    scroll (pos) {
      // console.log(pos)
      this.scrollY = pos.y
    },
    selectItem (item, index) {
      // console.log(item, index)
      // 不使用副本的话  那么 this.songs 这个数组本身会被改变 再次点击 就不是原来的songs
      // 所以会出现 随机播放模式以后 再次点击歌曲播放 发现播放的歌曲不是点击的歌曲
      this.selectPlay({
        list: this.songs,
        index: index
      })
    },
    // 用户点击顶部随机播放
    random () {
      // 用户点击顶部随机播放全部 传入 list 数组 我们只需要使用副本 否则就改变list数组本身 再次点击 list 数组已经是洗牌数组 点击的歌曲跟播放的歌曲不一样
      this.randomPlay({
        list: this.songs
      })
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length ? '60px' : ''
      this.$refs.list.$el.style.bottom = bottom
      this.$refs.list.refresh()
    },
    ...mapActions(['selectPlay', 'randomPlay'])
  },
  watch: {
    scrollY (newY) {
      // console.log(newY)
      const translateY = Math.max(this.minTransalteY, newY)
      let zIndex = 0
      let scale = 1
      let blur = 0
      this.$refs.layer.style[transform] = `translate3d(0, ${translateY}px, 0)`
      // 获取高斯模糊百分比 iphone 可以 Android不行
      const percent = Math.abs(newY / this.imageHeight)
      // 向下啦
      if (newY > 0) {
        scale = 1 + percent
        zIndex = 10
      } else {
        // 向上啦
        blur = Math.min(percent * 10, 10)
      }
      // 高斯模糊
      this.$refs.filter.style[backdrop] = `blur(${blur}px)`
      if (newY < this.minTransalteY) {
        // 滚动距离超过顶部 提升层级
        zIndex = 10
        this.$refs.bgImage.style.paddingTop = 0
        this.$refs.bgImage.style.height = RESERVED_HEIGHT + 'px'
        this.$refs.playBtn.style.display = 'none'
      } else {
        this.$refs.bgImage.style.paddingTop = '70%'
        this.$refs.bgImage.style.height = 0
        this.$refs.playBtn.style.display = 'block'
      }
      this.$refs.bgImage.style.zIndex = zIndex
      this.$refs.bgImage.style[transform] = `scale(${scale})`
    }
  },
  components: { Scroll, SongList, Loading }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import '~common/stylus/variable';

  .music-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: $color-background;

    .back {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;

      .icon-back {
        display: inline-block;
        font-size: $font-size-large-x;
        padding: 10px;
        color: $color-theme;
      }
    }

    .title {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      color: $color-text;
      width: 80%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      letter-spacing: 2px;
      font-weight: bold;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      z-index: 50;
    }

    .bg-image {
      height: 0;
      width: 100%;
      padding-top: 70%;
      transform-origin: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-clip: border-box;
      position: relative;

      .filter {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(7, 17, 27, 0.4);
      }

      .play-wrapper{
        position absolute;
        bottom 20px;
        width 100%;
        z-index 50;
        .play{
          width 50%;
          margin 0 auto;
          border 1px solid $color-theme;
          color $color-theme;
          display flex;
          align-items center;
          justify-content center;
          border-radius 40px;
          padding: 7px 0;
          .text{
            font-size $font-size-medium;
            margin-left 10px;
          }
        }
      }
    }

    .bg-layer {
      position: relative;
      height: 100%;
      background: #222;
    }

    .list {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color #222;

      .song-list-wrapper {
        padding: 20px 30px;
        padding-bottom: 0;
      }
    }
  }
</style>
